srcset and sizes Quiz

I want to recap what you just learned about the image attributes srcset and sizes. This is a chance for you to take a closer look at the syntax of each attribute before trying them out on a real page in the next two quizzes.

In this quiz, you'll experiment with srcset, and in the next you'll add sizes to give the browser even more information.

Syntax

There are two flavors of srcset, one using x to differentiate between device pixel ratios (DPR), and the other using w to describe the image's width.

Reacting to Device Pixel Ratio

<img src="image_2x.jpg" srcset="image_2x.jpg 2x, image_1x.jpg 1x" alt="a cool image">

Set srcset equal to a comma separated string of filename multiplier pairs, where each multiplier must be an integer followed by an x.

For example, 1x represents 1x displays and 2x represents displays with twice the pixel density, like Apple's Retina displays.

The browser will download the image that best corresponds to its DPR .

Also, note that there's a src attribute as a fallback.

Reacting to Image Width

<img src="image_200.jpg" srcset="image_200.jpg 200w, image_100.jpg 100w" alt="a cool image">

Set srcset equal to a comma separated string of filename widthDescriptor pairs, where each widthDescriptor is measured in pixels and must be an integer followed by a w. Here, the widthDescriptor gives the natural width of each image file, which enables the browser to choose the most appropriate image to request, depending on viewport size and DPR. (Without the widthDescriptor, the browser cannot know the width of an image without downloading it!)

Also, note that there's a src attribute as a fallback.

Ready to give it a shot? Click "Continue to Quiz" to try it out!

(Make sure you have installed the Udacity Feedback Chrome Extension for this quiz.)

Start Quiz:

Solution:

Here are my finished image tags:

DPR (Den Haag)

<img  class="dpi"
      src="images/Den_Haag_2x.jpg"
      srcset="images/Den_Haag_2x.jpg 2x, images/Den_Haag_1x.jpg 1x"
      alt="Den Haag Skyline">

Notice how I've got a src as a backup. The order of the sources in srcset doesn't matter. Also, if you omit the multiplier, it will default to 1x, meaning that

srcset="images/Den_Haag_2x.jpg 2x, images/Den_Haag_1x.jpg 1x"

is the same as

srcset="images/Den_Haag_2x.jpg 2x, images/Den_Haag_1x.jpg"

Image Width (Australia)

<img  class="w"
      src="images/Australia_1280w.jpg"
      srcset="images/Australia_1280w.jpg 1280w, images/Australia_640w.jpg 640w"
      alt="Australia from Space">

Once again, there's a src backup and you can switch the order of the images in srcset.

INSTRUCTOR NOTE:

Here's the site that needs some srcset!

High DPI Images for Variable Pixel Densities explains Device Pixel Ratio in detail: device-pixels-per-CSS-pixel is not quite the whole story!
Make sure you have installed the Udacity Feedback Chrome Extension!

Here's a working solution

Next Concept